<%--
  Created by IntelliJ IDEA.
  User: LYM
  Date: 2022/7/4
  Time: 12:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<html>
<head>
    <title>JSP for UserForm </title>
</head>

<body style=" background-image: linear-gradient(to right,azure,aquamarine);">


</body>

    <form method="post" action="./login">
        <div class="loginWrap">
            <div class="textWrap">
                <white><br><br>WELCOME<br>TO<br>MANAGER<br>SYSTEM</white>

            </div>
            <div class="inputWrap">

                <div class="inputContainer">

                    <h4>UserName</h4><br>

                    <input type="text" required placeholder="please enter your username" name="username"/><br>
                    <span style="color: brown">${usernameError} </span>

                </div>
                <div class="inputContainer2">
                    <h4>Password</h4><br>

                    <input type="password" required placeholder="please enter your password" name="password"/><br>
                    <span style="color: brown">${passwordError} </span>
                </div>
                <div class="buttonContainer">
                    <button type="submit" class="btn btn-primary">submit</button>
                </div>
            </div>
        </div>
    </form>

<% session.setAttribute("passwordError", "");
    session.setAttribute("usernameError", "");
%>

<style>

    .loginWrap {
        width: 50%;
        height: 40%;
        position: absolute;
        left: 25%;
        top: 25%;
        border-radius: 20px;
        background: azure;


    }

    .textWrap {
        width: 30%;
        height: 100%;
        float: left;
        text-align: center;
        background: aquamarine;
        border-radius: 20px 0px 0px 20px;
        font-style: oblique;
        font-size: 200%;

    }

    .inputWrap {
        width: 70%;
        height: 100%;
        float: left;
        text-align: center;

    }

    .inputContainer {
        width: auto;
        height: 20%;
        text-align: center;
        margin-top: 10%;

    }

    .inputContainer2 {
        width: auto;
        height: 20%;
        text-align: center;
        margin-top: 5%;
        margin-bottom: 10%;
    }

    .buttonContainer {
        width: auto;
        height: 20%;
        text-align: center;

    }

</style>

<style type="text/css">
    input {
        height: 30px;
        width: 300px;
    }

    white {
        color: white;
    }
</style>


</html>
